<template>
	<div class="tem-and-hum-container">
		<el-row class="header-box">
			<el-col :span="8" class="header-box-left">
				<div v-if="errorCount > 0" class="item-gap" @click="onSeeWarningBtn"><div class="el-icon-warning" style="font-size: 14px;color: orangered;cursor: pointer;"><span style="margin: 0 2px;">报警数量：{{ errorCount }}</span>个</div></div>
			</el-col>
			<el-col :span="8" class="header-box-title">温湿度监控</el-col>
			<el-col :span="8" class="header-box-right">
				<span class="current-time">{{ currentTime }}</span>
				<jk-full-screen-button class-name="tem-and-hum-container"></jk-full-screen-button>
				<el-button :loading="refreshBtnLoading" size="mini" type="primary" icon="el-icon-refresh" style="margin-left: 4px;" @click="onRefreshBtn"></el-button>
			</el-col>
		</el-row>
		<article class="article-box">
			<div class="chart-item-inner">
				<div class="chart-container">
					<div
						v-for="(processItem, processIndex) in processList"
						:key="processIndex"
						class="workshop-item"
					>
						<div class="process-box">
							<div class="card-title">{{ processItem.processName }}</div>
							<div
								v-for="(areaItem, areaIndex) in processItem.itemList"
								:key="areaIndex"
								class="process-item"
							>
								<div class="flex-between-center">
									<div>{{ areaItem.areaName }}</div>
									<!--<div style="color: #2b85e4;font-size: 12px;">{{ processItem.temHum }}</div>-->
								</div>
								<div class="flex-start-center">
									<div class="tem-hum-box">
										<div
											:class="[
												!areaItem.temState ? 'animation-class' : '',
												'tem-hum-icon'
											]"
											:style="{ color: !areaItem.temState ? 'orangered' : '#19be6b', borderColor: !areaItem.temState ? 'orangered' : '#19be6b' }"
										>
											<div class="el-icon-s-opportunity"></div>
										</div>
										<div>温度:</div>
										<div class="tem-hum-val">{{ areaItem.temValue || 0 }}℃</div>
									</div>
									<div class="tem-hum-box" style="color: #808695">
										<div></div>
										<div>设定:</div>
										<div class="tem-hum-val">{{ `${areaItem.temMin}~${areaItem.temMax}` }}℃</div>
									</div>
								</div>
								<div class="flex-start-center">
									<div class="tem-hum-box">
										<div
											:class="[
												!areaItem.humState ? 'animation-class' : '',
												'tem-hum-icon'
											]"
											:style="{ color: !areaItem.humState ? 'orangered' : '#19be6b', borderColor: !areaItem.humState ? 'orangered' : '#19be6b' }"
										>
											<div class="el-icon-heavy-rain"></div>
										</div>
										<div>湿度:</div>
										<div class="tem-hum-val">{{ areaItem.humValue || 0 }}%</div>
									</div>
									<div class="tem-hum-box" style="color: #808695">
										<div></div>
										<div>设定:</div>
										<div class="tem-hum-val">{{ `${areaItem.humMin}~${areaItem.humMax}` }}%</div>
									</div>
								</div>

							</div>
						</div>
					</div>
				</div>
			</div>

		</article>
	</div>
</template>
<script>
    import { formatTime } from '../../../utils/jk/jk-tool';
    import { machineManagerAreaSingleGetTemNum, machineManagerMachineGetHumiture } from '../../../api/production/kanBan';
    export default {
        components: {
        },
        data() {
            return {
                errorCount: 0,
                refreshBtnLoading: false,
                currentTime: '',
                processList: [],
                timer: {},
                timer2: {},
                areaWarningList: [],
                isSeeWarning: false
            };
        },
        methods: {
            onSeeWarningBtn() {
                this.isSeeWarning = !this.isSeeWarning;
            },
            onRefreshBtn() {
                this.isSeeWarning = false;
                this.geTumTemData();
            },
            getCurrentTime() {
                this.currentTime = formatTime(Date.now());
                this.timer = setInterval(() => {
                    this.currentTime = formatTime(Date.now());
                }, 1000);
            },
            calErrorCount() {
                this.errorCount = 0;
                this.processList.forEach(processItem => {
                    processItem.itemList.forEach(areaItem => {
                        if (!areaItem.temState) {
                            this.errorCount++;
                        }
                        if (!areaItem.humState) {
                            this.errorCount++;
                        }
                    });
                });
            },
            geTumTemData() {
                this.refreshBtnLoading = true;
                return machineManagerAreaSingleGetTemNum().then(res => {
                    this.refreshBtnLoading = false;
                    if (res.data.status === 200) {
                        this.processList = res.data.res || [];
                        this.calErrorCount();
                    }
                });
            },
            clearTime() {
                clearInterval(this.timer);
                clearInterval(this.timer2);
            },
            run() {
                this.geTumTemData();
                this.timer2 = setInterval(() => {
                    this.geTumTemData();
                }, 1000 * 3);
            }
        },
        mounted() {
        },
        beforeRouteEnter(to, from, next) {
            next((_this) => {
                _this.getCurrentTime();
                _this.areaWarningList = JSON.parse(JSON.stringify(_this.processList));
                _this.run();
            });
        },
        beforeRouteLeave(to, from, next) {
            this.clearTime();
            next();
        }
    };
</script>
<style scoped lang="scss">
    $border_color: #515a6e;
    .tem-and-hum-container {
        width: 100%;
        height: 100vh;
        color: #fff;
        overflow: hidden;
        //background: #000E25;
        background: url("../../../assets/images/technologyMonitor/jk2.jpg") no-repeat center;
        background-size: cover;
        .header-box {
            width: 100%;
            height: 80px;
            background: url("../../../assets/images/largeCentralControlScreen/header_bg.png") no-repeat center;
            background-size: 100% 100%;
            padding: 0 20px;
            .header-box-title {
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #fff;
                font-size: 32px;
                font-weight: 700;
                text-shadow: 0 0 20px #fff;
            }
            .header-box-left {
                height: 100%;
                display: flex;
                align-items: flex-end;
            }
            .header-box-right {
                height: 100%;
                display: flex;
                justify-content: flex-end;
                align-items: flex-end;
                .current-time {
                    font-size: 20px;
                    margin-right: 10px;
                }
            }
        }
        .article-box {
            width: 100%;
            height: calc(100% - 80px);
            padding: 16px;
            .chart-item-inner {
                width: 100%;
                height: 100%;
                border-radius: 10px;
                box-sizing: border-box;
                .chart-container {
                    width: 100%;
                    height: 100%;
                    overflow: auto;
                    display: flex;
                    flex-wrap: wrap;
                    .workshop-item {
                        width: calc(100%  / 4);
                        border-radius: 10px;
                        box-sizing: border-box;
                        padding: 7px;
                        .process-box {
                            width: 100%;
                            height: 100%;
                            background: #262f70;
                            padding: 12px;
                            border-radius: 10px;
                            border: solid 1px #2b5790;
                            .card-title {
                                box-sizing: border-box;
                                font-size: 18px;
                                border-left: solid 4px #2b85e4;
                                margin-bottom: 10px;
                                padding-left: 4px;
                                color: #2b85e4;
                                font-weight: 700;
                            }
                            .process-item {
                                border: dashed 1px #2b85e4;
                                border-bottom: none;
                                padding: 10px;
                                border-radius: 4px;
                                .tem-hum-box {
                                    width: 50%;
                                    display: flex;
                                    align-items: center;
                                    margin: 5px 0;
                                    font-size: 14px;
                                    .tem-hum-icon {
                                        width: 30px;
                                        height: 30px;
                                        border-radius: 50%;
                                        border: solid 1px orangered;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        font-size: 18px;
                                        margin-right: 4px;
                                        flex-shrink: 0;
                                    }
                                    .animation-class {
                                        animation: upkeepCircle 1s ease-in infinite;
                                    }
                                    @keyframes upkeepCircle {
                                        0% {
                                            opacity: 1;
                                            box-shadow: 0 0 5px 3px orangered;
                                        }
                                        50% {
                                            opacity: .5;
                                            box-shadow: 0 0 0 0 orangered;
                                        }
                                        100% {
                                            opacity: 1;
                                            box-shadow: 0 0 5px 3px orangered;
                                        }
                                    }
                                    .tem-hum-val {
                                        margin-right: 4px;
                                    }
                                }
                            }
                            .process-item:last-child {
                                border-bottom: dashed 1px #2b85e4;
                            }
                        }
                    }

                }
                // 滚动条样式
                .chart-container::-webkit-scrollbar{
                    width: 6px;
                    height: 7px;
                }
                .chart-container::-webkit-scrollbar-thumb:hover{
                    width: 6px;
                    height: 7px;
                    cursor: pointer;
                    background-color: #114896;
                }
                .chart-container::-webkit-scrollbar-thumb{
                    border-radius: 1em;
                    background-color: #1A2F68;
                }
                .chart-container::-webkit-scrollbar-track{
                    border-radius: 1em;
                    background-color: rgba(50,50,50,.1);
                }
            }
        }
    }
</style>
